<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2016/8/16
  Time: 17:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="bookNumber">
    您的购物车中共有 ${sessionScope.ShoppingCart.bookNumber}件商品
</div>

<br><br>
<table cellpadding="10">
    <tr>
        <td>书名</td>
        <td>数量</td>
        <td>价格</td>
        <td>&nbsp;</td>
    </tr>
    <c:forEach items="${sessionScope.ShoppingCart.items}" var="item">
        <tr>
            <td>${item.book.title}</td>
            <td><input type="text" id="${item.book.id}" value="${item.quantity}"></td>
            <td>${item.book.price}</td>
            <td><a href="/shopping/delete?pageNo=${param.pageNo }&id=${item.book.id }" class="delete">删除</a></td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="4" id="totalMoney">合计:${sessionScope.ShoppingCart.totalMoney}</td>
    </tr>
    <tr>
        <td><a href="/book/list?pageNo=${param.pageNo }">继续购物</a></td>
        <td><a href="/shopping/clear?pageNo=${param.pageNo }">清空购物车</a></td>
        <td><a href="/cash/toCash">结账</a></td>
    </tr>

</table>

<script type="text/javascript" src="/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function () {
        $(".delete").click(function () {
            var $tr = $(this).parent().parent();
            var title = $.trim($tr.find("td:first").text());
            var flag = confirm("确定要删除" + title + "的信息吗?");
            if (flag) {
                return true;
            }
            return false;
        })

        //1.获取页面中所有的text ,并为其添加onchange 函数,弹出对话框,确认是否修改!
        $(":text").change(function () {
            //获取要修改的信息
            var $tr = $(this).parent().parent();
            var title = $.trim($tr.find("td:first").text());
            var flag = confirm("确定要修改" + title + "数量吗?");
            if (!flag) {
                return;
            }
            //2.请求地址为 : book
            var url = "/shopping/updateItemQuantity";
            //3.请求参数: method :updateItemQuantity  id: name的属性值  quantity :val
            var idVal = $.trim(this.id);
            var quantityVal = $.trim(this.value);
            var args = {"method": "updateItemQuantity", "id": idVal, "quantity": quantityVal, "time": new Date()};
            //4.在updateItemQuantity 方法中,获取quantity 数量,id  ,在获取购物车对象,调用service的方法
            //5.回传 JSON数据;

            //6.更新当前页面 bookNumber 和 totalMoney ;
            $.post(url, args, function (data) {
                var bookNumber = data.bookNumber;
                var totalMoney = data.totalMoney;

                $("#bookNumber").text("您的购物车中共有 " + bookNumber + "件商品");
                $("#totalMoney").text("合计:" + totalMoney);
            }, "JSON");

            return false;
        });
    });
</script>
</body>
</html>
